import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, InputNumber, Radio, TreeSelect, Switch } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';
import TextArea from 'antd/lib/input/TextArea';
import { formatMessage } from 'umi-plugin-react/locale';
import { ListItem } from '../data';
import * as DataHelper from '@/helpers/DataHelper';

const FormItem = Form.Item;

interface ConfigFormProps extends FormComponentProps {
  modalVisible: boolean;
  otherValues: any;
  values: Partial<ListItem>;
  onSubmit: (fieldsValue: FormValueType) => Promise<any>;
  onCancel: () => void;
  handleChangeType: (value:any) => void;
}

export interface FormValueType extends Partial<ListItem> {
  id?: number;
  name?: string;
  remark?: string;
  type?: string;
  nickname?: string;
  rank_num?: number;
  is_enable?:any;
}

const ConfigForm: React.FC<ConfigFormProps> = props => {
  const { modalVisible, form, onSubmit: handleSubmit, onCancel, otherValues, values, handleChangeType } = props;
  const {isUpdate, radioType, common} = otherValues;

  const treeData = DataHelper.getTreeData(common)
  const treeProps = {
    treeData: treeData,
    // onChange: this.handleCategoryChange,
    treeDefaultExpandAll: true,
    searchPlaceholder: '搜索值',
    style: { width: '100%' },
  }

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(isUpdate){
        fieldsValue.id = values.id;
      }
      handleSubmit(fieldsValue).then(success => {
        if(success){
          form.resetFields();
        }
      });
    });
  };

  return (
    <div>
    { modalVisible &&
    <Modal
      destroyOnClose
      title={isUpdate ? "编辑菜单" : "新增菜单"}
      width="60%"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >

        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.parent'}) }>
          {form.getFieldDecorator('parent_id', {
            initialValue: isUpdate ? values.parent_id : [],
            rules: [{required: false, message: formatMessage({id:'app.base.verify.parent'})}],
          })(
            <TreeSelect placeholder="请选择" {...treeProps} />
          )}
        </FormItem>

        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.type'}) }>
        {form.getFieldDecorator('type', {
            initialValue: isUpdate ? values.type : 'component',
            rules: [{required: true, message: formatMessage({id:'app.base.verify.type'})}],
          })(
          <Radio.Group  buttonStyle="solid" onChange={(e)=>handleChangeType(e.target.value)} disabled={isUpdate}>
            <Radio.Button value="layout">layout</Radio.Button>
            <Radio.Button value="component">component</Radio.Button>
            <Radio.Button value="redirect">redirect</Radio.Button>
          </Radio.Group>)}
        </FormItem>

        {radioType === 'component' &&
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.component-type'}) }>
            {form.getFieldDecorator('is_show', {
              initialValue: isUpdate ? values.is_show : 1,
              rules: [{required: true, message: formatMessage({id:'app.base.path-null'})}],
            })(<Radio.Group  buttonStyle="solid" onChange={()=>{}} >
            <Radio.Button value={1}>{ formatMessage({id:'app.base.display'}) }</Radio.Button>
            <Radio.Button value={2}>{ formatMessage({id:'app.base.is-enable.false'}) }</Radio.Button>
          </Radio.Group>)}
          </FormItem>
        }
        {
          (radioType === 'layout' || radioType === 'component') &&
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.name'}) }>
            {form.getFieldDecorator('name', {
              initialValue: isUpdate ? values.name : '',
              // rules: [{required: true, message: '名称不能为空！'}],
            })(<Input placeholder="" />)}
          </FormItem>
        }
        {(radioType === 'component'||radioType === 'layout') && 
          <FormItem help='更多图标请查看: https://ant.design/components/icon-cn/#header' labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.icons'})}>
            {form.getFieldDecorator('icon', {
              initialValue: isUpdate ? values.icon : '',
              //rules: [{required: true, message: formatMessage({id:'app.base.icons-null'})}],
            })(<Input placeholder="" />)}
          </FormItem>
        }
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.path'}) }>
          {form.getFieldDecorator('menu_path', {
            initialValue: isUpdate ? values.menu_path : '',
            rules: [{required: true, message: formatMessage({id:'app.base.path-null'})}],
          })(<Input placeholder="" />)}
        </FormItem>
        {(radioType === 'component') &&
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.component'}) }>
            {form.getFieldDecorator('component', {
              initialValue: isUpdate ? values.component : '',
              rules: [{required: true, message: formatMessage({id:'app.base.component-null'})}],
            })(<Input placeholder="" />)}
          </FormItem>
        }
        {radioType === 'redirect' && 
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.redirect-path'}) }>
            {form.getFieldDecorator('redirect', {
              initialValue: isUpdate ? values.redirect : '',
              rules: [{required: true, message: formatMessage({id:'app.base.path-no-null'})}],
            })(<Input placeholder="" />)}
          </FormItem>
        }

        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.remark'}) }>
          {form.getFieldDecorator('remark', {
            initialValue: isUpdate ? values.remark : '',
            //rules: [{required: true, message: formatMessage({id:'app.base.remark-null'})}],
          })(<TextArea rows={2} placeholder="" />)}
        </FormItem>   

        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.sort'}) }>
          {form.getFieldDecorator('rank_num', {
            initialValue: isUpdate ? values.rank_num : 888,
            rules: [{required: true, message: formatMessage({id:'app.base.verify.sort'})}],
          })(<InputNumber style={{width: '100%'}} placeholder={ formatMessage({id:'app.base.placeholder.sort'}) } min={1} />)}
        </FormItem>

        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={ formatMessage({id:'app.base.is-enable'}) }>
          {form.getFieldDecorator('is_enable', {
            initialValue: isUpdate ? values.is_enable : true,
            valuePropName: 'checked',
            rules: [],
          })(<Switch checkedChildren={ formatMessage({id:'app.base.is-enable.true'}) } unCheckedChildren={ formatMessage({id:'app.base.is-enable.false'}) } />)}
        </FormItem>

    </Modal>
   } 
   </div>
  );
};

export default Form.create<ConfigFormProps>()(ConfigForm);
